<script setup lang="ts">
import { ref, computed, defineExpose } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { getBarLine } from "@/api/welcome";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
const props = defineProps({
  dataArr: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ""
  }
});
var colorList = [
  "#73DDFF",
  "#73ACFF",
  "#FDD56A",
  "#FDB36A",
  "#FD866A",
  "#9E87FF",
  "#58D5FF"
];
// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });
const dataServer = ref([]);
const xAxisData = ref([]);
const getBarLineMEthod = () => {
  getBarLine().then(res => {
    let { bar, times, line, titleList } = res?.data || {};

    xAxisData.value = times;
    let title = ["进行中", "延期中", "已完成"];
    const list = [];
    list.push({
      name: "总金额",
      type: "line",
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return `${value}\n 22`;
        }
      },
      data: line
    });
    for (let index = 0; index < title.length; index++) {
      const element = title[index];
      list.push({
        name: element,
        type: "bar",
        stack: "total",
        barWidth: 30,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: bar[index]
      });
    }

    dataServer.value = list;
    renderEcharts(xAxisData.value, dataServer.value, titleList);
  });
};
getBarLineMEthod();

defineExpose({
  getBarLineMEthod
});
// 根据配置项渲染ECharts

function renderEcharts(xData, serverData, titleList) {
  setOptions({
    grid: {
      left: "50px",
      top: "50px"
    },
    legend: {
      bottom: 0
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      },
      formatter: function (params) {
        var res = " ";
        for (var i = 0, l = params.length; i < l; i++) {
          if (params[i].seriesType === "line") {
            res += `
            <div><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;"></span> 资助类型: ${
              titleList[params[i]["dataIndex"]]
            }</div>
            <div><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;"></span> 总项目数: ${params[i + 1].value + params[i + 2].value + params[i + 3].value}</div>`;
          }
          res += `<div>${params[i].marker} ${params[i].seriesName}: ${params[i].value}</div>`;
        }
        return res;
      }
    },
    xAxis: [
      {
        type: "category",
        data: xData,
        axisPointer: {
          type: "shadow"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        name: "数量",
        splitLine: {
          show: false
        },
        boundaryGap: [0, 0.01]
      },
      {
        name: "金额",
        type: "value",
        min: 0
      }
    ],
    series: serverData
  });
}
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 476px" />
</template>
